/* eslint-disable no-undef */
<template>
  <div class="login">
    <common-form-tel class="inp1" v-if="formShow" :form="formTel" :formList="formListTel" @formLogin="LoginTel" @formInput="watchInputTel">
      <label class="area" slot="lab" @click="area">
        <span class="area-code">+{{ areaCode }}</span>
        <van-icon class="area-icon" name="arrow-down" />
      </label>
      <p class="code" slot="code">
        <span class="getcode" :class="{ activeTxt: timeCode.activeCode, activeDisable: timeCode.disabled }" @click="getCode">{{ timeCode.txt }}</span>
      </p>
      <p class="tip" slot="tip" v-show="tip.tipShow">{{ tip.tipTxt }}</p>
      <div class="btn" slot="butLogin">
        <van-button
          class="btn_sub"
          :class="{ active: loginBut.loginActive, activeDisable: loginBut.loginDisable }"
          round
          block
          type="info"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </common-form-tel>
    <common-form-user v-else class="inp2" :form="formUser" :formList="formListUser" @formLogin="LoginUser" @formInput="watchInputUser">
      <p class="forgetpass" slot="code">忘记密码</p>
      <p class="tip" slot="tip" v-show="tip.tipShow">{{ tip.tipTxt }}</p>
      <div class="btn" slot="butUser">
        <van-button
          class="btn_sub"
          :class="{ active: loginBut.loginActive, activeDisable: loginBut.loginDisable }"
          round
          block
          type="info"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </common-form-user>

    <van-button class="btn_log" round block plain hairline type="danger">
      一键登录
    </van-button>
    <div class="swich-btn">
      <div class="swich-btn-left" @click="switchShow"><span v-show="formShow">账号密码登录</span><span v-show="!formShow">手机号登录</span></div>
      <div class="swich-btn-right">手机号快速注册</div>
    </div>
    <div class="otherLogin">
      <h5 class="txt-otherLogin">其他登录方式</h5>
      <div class="quick-type">
        <span>QQ</span>
        <span>微信</span>
        <span>微博</span>
      </div>
    </div>
    <common-verify class="verify" v-show="verifyList.verifyShow" :verify="verify" @verifyResult="verifyResult" />
  </div>
</template>

<script>
import commonFormTel from '../../common/form/commonFormTel'
import commonFormUser from '../../common/form/commonFormUser'
import commonVerify from '../../common/verify/verifyImg'
import { mapState } from 'vuex'
export default {
  name: 'Login',
  components: {
    commonFormTel,
    commonFormUser,
    commonVerify
  },
  data() {
    return {
      formShow: true, // 切换登录方式
      verifyList: {
        verifyShow: false, // 滑动图片验证
        verifyTxt: ''
      },
      verify: {
        // 传参给verify
        w: 315,
        h: 220,
        l: 42,
        r: 10
      },
      tip: {
        // 提示样式
        tipShow: false,
        tipTxt: ''
      },
      loginBut: {
        loginDisable: true, // 登录按钮是否可点击
        loginActive: false // 登录按钮的颜色
      },
      tel: '', // 手机号
      code: '', // 验证码
      txt: '',
      password: '',
      timeCode: {
        // 短信验证码
        txt: '获取验证码',
        time: 60,
        activeCode: false,
        disabled: false
      },
      formTel: {
        tel: '',
        code: ''
      },
      formListTel: [
        {
          model: 'tel',
          label: '',
          name: '手机号',
          type: 'number'
        },
        {
          model: 'code',
          label: '',
          name: '验证码',
          type: 'number'
        }
      ],
      formUser: {
        username: '',
        password: ''
      },
      formListUser: [
        {
          model: 'username',
          label: '',
          name: '用户名/邮箱/手机号',
          type: 'text'
        },
        {
          model: 'password',
          label: '',
          name: '密码',
          type: 'password'
        }
      ]
    }
  },
  methods: {
    area() {
      // 点击选择国家或者地区的区号
      this.$router.push('/city')
    },
    switchShow() {
      // 账号密码登录或者手机号登录切换
      this.formShow = !this.formShow
      this.formTel.tel = ''
      this.formTel.code = ''
      this.formUser.username = ''
      this.formUser.password = ''
      this.timeCode.time = 0
      this.loginBut.loginActive = false
      this.loginBut.loginDisable = true
      this.tip.tipShow = false
    },
    watchInputTel(res) {
      // console.log(res)
      // 监听手机号登录input
      this.tel = res.tel
      this.code = res.code
      // 判断手机号是否存在 并对tip进行操作
      if (this.tel || this.code) {
        this.tip.tipShow = false
        this.tip.tipTxt = ''
      }
      if (this.tel && this.code.length > 1) {
        console.log('手机登录 + 有数据')
        this.loginBut.loginActive = true
        this.loginBut.loginDisable = false
      } else {
        this.loginBut.loginActive = false
        this.loginBut.loginDisable = true
      }
    },
    LoginTel(telCode) {
      // 提交表单
      if (this.code.length !== 4) {
        this.tip.tipShow = true
        this.tip.tipTxt = '验证码格式有误'
        return
      }
      console.log(telCode)
    },
    watchInputUser(res) {
      // console.log(res)
      // 监听账号密码的input
      this.txt = res.username
      this.password = res.password
      // 判断账号密码登录
      if (this.txt || this.password) {
        this.tip.tipShow = false
        this.tip.tipTxt = ''
      }
      if (this.txt && this.password > 1) {
        console.log('账号密码 + 有数据')
        this.loginBut.loginActive = true
        this.loginBut.loginDisable = false
      } else {
        this.loginBut.loginActive = false
        this.loginBut.loginDisable = true
      }
    },
    async LoginUser(telCode) {
      try {
        // 提交表单
        if (this.password.length < 6) {
          this.tip.tipShow = true
          this.tip.tipTxt = '密码不得小于6位'
          return
        } else {
          const model = telCode
          const data = await this.http.post('login', model)
          console.log(data)
          if (data.code == 0) {
            console.log(data.message)
          } else if (data.code == 1) {
            console.log(data.message)
          } else {
            console.log(data.message)
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    getCode() {
      // 点击获取短信验证码
      //（1）提交手机号给后台
      // 校验手机号
      const phone = /^1[34578]\d{9}$/
      if (!phone.test(this.tel)) {
        this.tip.tipShow = true
        this.tip.tipTxt = '手机号格式有误'
        return
      }
      //（2）获取验证码
      this.verifyList.verifyShow = true
    },
    verifyResult(e) {
      // 监听滑动组件
      this.verifyList.verifyTxt = e
      console.log('滑块成功' + e)

      if (this.verifyList.verifyTxt == '成功') {
        this.verifyList.verifyShow = false
        this.timeCodes()
        return
      }
    },
    timeCodes() {
      // 验证码倒计时
      if (this.timeCode.time > 0) {
        this.timeCode.activeCode = true
        this.timeCode.disabled = true
        this.timeCode.txt = this.timeCode.time + 's'
        this.timeCode.time--
      } else {
        this.timeCode.activeCode = false
        this.timeCode.disabled = false
        this.timeCode.txt = '重新获取'
        this.timeCode.time = 60
        return
      }
      setTimeout(() => {
        this.timeCodes()
      }, 1000)
    }
  },
  computed: {
    ...mapState({
      areaCode: state => state.login.areaCode
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/login.scss';
.active {
  -webkit-background: linear-gradient(90deg, #f10000, #ff2000 73%, #ff4f18) !important;
  background: linear-gradient(90deg, #f10000, #ff2000 73%, #ff4f18) !important;
  box-shadow: none !important;
}
.activeTxt {
  color: red;
}
.activeDisable {
  // 标签不可点击
  pointer-events: none;
}
.tip {
  font-size: 0.25rem;
  color: #f10000;
  margin-top: 0.15rem;
}
</style>
